<template>
	<view>
		<view class="main-container">
			<view class="card-view">
				<view class="title">{{ detailData.hospitalName }}</view>
				<view class="proj-row" :key="index" v-for="(item, index) in detailData.itemInfos">
					<image :src="item.serviceItemImg"></image>
					<view class="name">{{ item.serviceItem }}</view>
					<cn-money :money="Number.parseFloat(item.serviceItemPrice)" :size="48"></cn-money>
				</view>
			</view>

			<view class="card-view">
				<view class="title">退款信息</view>
				<view class="info-row">
					<view class="name">雾化吸入</view>
					<view class="value">
						<cn-money :money="Number.parseFloat(detailData.orderAmount)" :size="48"></cn-money>
					</view>
				</view>
				<view class="info-row">
					<view class="name">退回账户</view>
					<view class="value">原支付账户</view>
				</view>
				<view class="info-row">
					<view class="name">雾化吸入</view>
					<view class="value">1-7个工作日</view>
				</view>
			</view>

			<view class="card-view">
				<u-radio-group v-model="cancelReason" placement="column">
					<u-radio labelColor="#232323" labelSize="15" activeColor="#0BC5AE" name="计划有变，暂时不需要"
						label="计划有变，暂时不需要"></u-radio>
					<u-radio labelColor="#232323" labelSize="15" activeColor="#0BC5AE" name="没有看清使用规则" label="没有看清使用规则"
						style="margin-top: 20rpx;"></u-radio>
					<u-radio labelColor="#232323" labelSize="15" activeColor="#0BC5AE" name="后悔了，不需要服务"
						label="后悔了，不需要服务" style="margin-top: 20rpx;"></u-radio>
				</u-radio-group>
			</view>

			<view class="submit-btn" @click="handleSubmit">
				提交
			</view>

		</view>
	</view>
</template>

<script>
import * as orderInfo from '../../common/api/orderInfo.js'
import cnMoney from '../../components/cn-money/cn-money'
export default {
	components: {
		cnMoney
	},
	data() {
		return {
			uid: '',
			detailData: {},
			cancelReason: '计划有变，暂时不需要'
		}
	},
	methods: {
		getData() {
			const param = {
				uid: this.uid
			}
			orderInfo.queryById(param).then(result => {
				this.detailData = result.data.data
			}).catch(error => {
				console.log(error);
			})
		},
		handleSubmit() {
			const param = {
				orderId: this.detailData.orderNum,
				orderCancel: this.cancelReason,
				orderRefurdAmout: this.detailData.orderAmount
			}
			uni.showModal({
				title: '提示',
				content: '确认取消订单？',
				success: (res) => {
					if (res.confirm) {
						orderInfo.refundApply(param).then(result => {
							if (result.data.code == 200) {
								uni.showToast({
									icon: 'success',
									title: '取消成功',
									complete() {
										setTimeout(() => {
											uni.navigateBack()
										}, 2000)
									}
								})
							}
						}).catch(error => {
							console.log(error);
						})
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			})



		}
	},
	onLoad(opt) {
		if (opt.uid) {
			this.uid = opt.uid
		}
	},
	onShow() {
		this.getData()
	},

}
</script>
<style>
page {
	background-color: #f5f5f5;
}
</style>
<style lang="scss" scoped>
.main-container {
	display: flex;
	flex-direction: column;
}

.card-view {
	margin-left: 20rpx;
	margin-right: 20rpx;
	padding: 30rpx;
	background: white;
	border-radius: 16rpx;
	margin-top: 20rpx;

	.title {
		font-size: 30rpx;
		font-weight: bold;
		color: #232323;
	}
}

.proj-row {
	display: flex;
	align-items: center;
	margin-top: 20rpx;

	image {
		width: 136rpx;
		height: 136rpx;
	}

	.name {
		color: #232323;
		font-size: 30rpx;
		margin-left: 20rpx;
		flex: 1;
	}
}

.info-row {
	display: flex;
	align-items: center;
	margin-top: 20rpx;

	.name {
		color: #232323;
		font-size: 30rpx;
		flex: 1;
	}

	.value {
		color: #232323;
		font-size: 30rpx;
	}
}

.submit-btn {
	margin: 30rpx;
	background: #0BC5AE;
	height: 88rpx;
	color: white;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 30rpx;
	border-radius: 48rpx;
}
</style>